<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      #app {
        width: 100%;
        display: flex;
        justify-content: center;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="spu-wrap">
        <div>{{ title }}</div>
        <div>{{ price }}</div>
        <div>{{ tip }}</div>
        <div v-for="(item,index) in btnsData" :key="index">
          <div>{{ item.key }}</div>
          <el-button
            :disabled="it.disabled"
            @click="radioClick(item,it.value_id)"
            :type="item.select===it.value_id?'primary':''"
            sizi="mini"
            v-for="(it,ind) in item.items"
            :key="ind"
          >
            {{ it.value }}
          </el-button>
        </div>
      </div>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function() {
        return {
          title: "", // 商品名称
          price: "", // 商品价格
          tip: "", // 提示信息
          btnsData: [], // 页面绑定数据
          // spu数据
          spuData: {
            id: 2,
            title: "",
            subtitle: "",
            category_id: 12,
            root_category_id: 2,
            price: "77.00",
            img: "",
            for_theme_img: "",
            description: null,
            discount_price: "62.00",
            tags: "包邮$热门",
            is_test: true,
            online: true,
            sku_list: [
              {
                id: 2,
                price: 77.76,
                discount_price: null,
                online: true,
                img: "",
                title: "金属灰·七龙珠",
                spu_id: 2,
                category_id: 17,
                root_category_id: 3,
                specs: [
                  {
                    key_id: 1,
                    key: "颜色",
                    value_id: 45,
                    value: "金属灰"
                  },
                  {
                    key_id: 3,
                    key: "图案",
                    value_id: 9,
                    value: "七龙珠"
                  },
                  {
                    key_id: 4,
                    key: "尺码",
                    value_id: 14,
                    value: "小号 S"
                  }
                ],
                code: "2$1-45#3-9#4-14",
                stock: 5
              },
              {
                id: 3,
                price: 66,
                discount_price: 59,
                online: true,
                img: "",
                title: "青芒色·灌篮高手",
                spu_id: 2,
                category_id: 17,
                root_category_id: 3,
                specs: [
                  {
                    key_id: 1,
                    key: "颜色",
                    value_id: 42,
                    value: "青芒色"
                  },
                  {
                    key_id: 3,
                    key: "图案",
                    value_id: 10,
                    value: "灌篮高手"
                  },
                  {
                    key_id: 4,
                    key: "尺码",
                    value_id: 15,
                    value: "中号 M"
                  }
                ],
                code: "2$1-42#3-10#4-15",
                stock: 999
              },
              {
                id: 4,
                price: 88,
                discount_price: null,
                online: true,
                img: "",
                title: "青芒色·圣斗士",
                spu_id: 2,
                category_id: 17,
                root_category_id: 3,
                specs: [
                  {
                    key_id: 1,
                    key: "颜色",
                    value_id: 42,
                    value: "青芒色"
                  },
                  {
                    key_id: 3,
                    key: "图案",
                    value_id: 11,
                    value: "圣斗士"
                  },
                  {
                    key_id: 4,
                    key: "尺码",
                    value_id: 16,
                    value: "大号  L"
                  }
                ],
                code: "2$1-42#3-11#4-16",
                stock: 8
              },
              {
                id: 5,
                price: 77,
                discount_price: 59,
                online: true,
                img:
                  "http://i1.sleeve.talelin.com/assets/09f32ac8-1af4-4424-b221-44b10bd0986e.png",
                title: "橘黄色·七龙珠",
                spu_id: 2,
                category_id: 17,
                root_category_id: 3,
                specs: [
                  {
                    key_id: 1,
                    key: "颜色",
                    value_id: 44,
                    value: "橘黄色"
                  },
                  {
                    key_id: 3,
                    key: "图案",
                    value_id: 9,
                    value: "七龙珠"
                  },
                  {
                    key_id: 4,
                    key: "尺码",
                    value_id: 14,
                    value: "小号 S"
                  }
                ],
                code: "2$1-44#3-9#4-14",
                stock: 7
              }
            ],
            spu_img_list: [
              {
                id: 165,
                img:
                  "http://i1.sleeve.talelin.com/assets/5605cd6c-f869-46db-afe6-755b61a0122a.png",
                spu_id: 2
              }
            ],
            spu_detail_img_list: [
              {
                id: 24,
                img: "http://i1.sleeve.talelin.com/spu/moshui1/1.png",
                spu_id: 2,
                index: 1
              }
            ],
            sketch_spec_id: 1,
            default_sku_id: 2
          }
        };
      },
      computed: {
        spuSelected() {
          // 获取选中状态
          let data = [];
          this.btnsData.forEach(item => {
            data.push({
              key_id: item.key_id,
              select: item.select
            });
          });
          return data;
        }
      },
      mounted() {
        this.btnsData = this.initSpu();
      },
      methods: {
        initSpu() {
          // 初始化页面绑定数据
          let temp = [];
          this.spuData.sku_list.forEach(item => {
            item.specs.forEach((it, ind) => {
              let data = temp.find(tempIt => {
                return tempIt.key_id === it.key_id;
              });
              if (data) {
                temp.map(tempIt => {
                  if (tempIt.key_id === it.key_id) {
                    let data2 = tempIt.items.find(tempIt2 => {
                      return tempIt2.value_id === it.value_id;
                    });
                    if (!data2) {
                      tempIt.items.push({
                        value_id: it.value_id,
                        value: it.value,
                        disabled: false
                      });
                    }
                    return tempIt;
                  }
                });
              } else {
                temp.push({
                  key_id: it.key_id,
                  key: it.key,
                  select: this.spuData.sku_list[2].specs[ind].value_id,
                  items: [
                    {
                      value_id: it.value_id,
                      value: it.value,
                      disabled: false
                    }
                  ]
                });
              }
            });
          });
          return temp;
        },
        radioClick(item, value) {
          // 选中及反选
          if (item.select === value) {
            item.select = "";
          } else {
            item.select = value;
          }
        },
        filterSpu(keyId) {
          this.spuData.sku_list.filter(item => {
            let flag = 1; // filter返回标识
            item.specs.forEach(specsItem => {
              selectData.forEach(selectItem => {
                if (specsItem.key_id === selectItem.key_id) {
                  if (specsItem.value_id !== selectItem.select) {
                    flag = flag * 0;
                  }
                }
              });
            });
            return flag;
          });
        }
      },
      watch: {
        spuSelected: {
          // 监听按钮选项
          handler(val) {
            let code = this.spuData.id + "$"; // 匹配spu code值
            // 获取已选择的属性
            let selectData = val.filter(item => {
              return item.select != "";
            });
            // 为btnsData disabled赋值 已选中的spu包含的属性为可选属性
            this.btnsData.map(item => {
              // 找到筛选后的属性
              let selectData = val.filter(it => {
                return it.select != "" && it.key_id != item.key_id;
              });
              // 找到包含选中属性的spu
              let filterSpu = this.spuData.sku_list.filter(item => {
                let flag = 1; // filter返回标识
                item.specs.forEach(specsItem => {
                  selectData.forEach(selectItem => {
                    if (specsItem.key_id === selectItem.key_id) {
                      if (specsItem.value_id !== selectItem.select) {
                        flag = flag * 0;
                      }
                    }
                  });
                });
                return flag;
              });
              item.items.map(it => {
                it.disabled = true;
                filterSpu.forEach(spuItem => {
                  spuItem.specs.forEach(specItem => {
                    if (it.value_id === specItem.value_id) {
                      it.disabled = false;
                    }
                  });
                });
                return it;
              });
              return item;
            });

            // code 匹配spu显示商品信息
            val.forEach(item => {
              code += `${item.key_id}-${item.select}#`;
            });
            code = code.slice(0, code.length - 1);
            let codeTrue = this.spuData.sku_list.find(item => {
              return item.code === code;
            });
            if (codeTrue) {
              this.title = codeTrue.title;
              this.price = codeTrue.price;
            } else {
              this.title = "";
              this.price = "";
            }

            // 提示信息
            let tip = this.btnsData.filter(item => {
              return selectData.every(it => {
                return it.key_id !== item.key_id;
              });
            });
            this.tip = "";
            tip.forEach(item => {
              this.tip += `请选择${item.key},`;
            });
            this.tip = this.tip.slice(0, this.tip.length - 1);
          },
          deep: true
        }
      }
    });
  </script>
</html>
